<template>
  <PageLayout full :page-style="pageStyle">
    <template #header>
      <HeaderLayout show-back>
        <view>{{ $t('Pairing.PairGuideVideo.Navigator.PairingVideo.Title') }}</view>
      </HeaderLayout>
    </template>
    <view class="container">
      <!-- <view class="videoTip" v-if="videos && networkType != 'wifi' && !playing && !canPlayNoWifi">
        <view class="tipDesc">{{ $t('Pairing.PairGuideVideo.UseData.Tips.Text') }}</view>
        <view class="tipBtm">
          <view :bind="playVideo" type="playBtn">{{ $t('Pairing.PairGuideVideo.StillPlay.Button.Text') }}</view>
        </view>
      </view> -->
      <view class="playLayout">
        <polyv-player
          id="myVideo"
          playerId="myPlay"
          :vid="videos"
          :bindended="handleEnded"
          v-if="videos"
          :bindpause="handlePause"
          :bindstatechange="playstatechange"
        >
        </polyv-player>
        <image style="width: 100%" src="/static/img_PlaceHolder_long.png" v-if="!videos" mode="widthFix"></image>
      </view>
      <view class="desLayout">
        <text
          >{{ $t('Pairing.PairGuideVideo.PairingDevice.Tips.Text') }}
          {{ $t('Pairing.PairGuideVideo.WatchVideo.Tips.Text') }}
        </text>
      </view>
    </view>
  </PageLayout>
</template>

<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import { onHide, onLoad, onShow } from '@dcloudio/uni-app'
import { reportEventData } from '@/dataReport/dataReportUtil'
import keyUtils from '@/dataReport/keyUtils'
const pageStyle = {
  backgroundColor: '#ffffff',
}
const videos = ref('')
const networkType = ref('')
const playing = ref(false)
const canPlayNoWifi = ref(false)
const instance = getCurrentInstance()
let polyvPlayerContext: any
onLoad((options: any) => {
  videos.value = options.pairguidevideoUrl
  // videos.value = '7d140639ad10a2f987f84a94e2e88d61_7'
  polyvPlayerContext = (instance as any).ctx.selectComponent('#myVideo')
  // uni.getNetworkType({
  //   success: (res) => {
  //     if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
  //       networkType.value = '4G'
  //     } else if (res.networkType == 'wifi') {
  //       networkType.value = 'wifi'
  //     }
  //   },
  // })
})
onShow(() => {
  uni.onNetworkStatusChange(onNetworkStatusChange)
})
onHide(() => {
  uni.offNetworkStatusChange(onNetworkStatusChange)
})
function onNetworkStatusChange(res: any) {
  console.log(res.isConnected)
  console.log(res.networkType)
  if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
    networkType.value = '4G'
  } else if (res.networkType == 'wifi') {
    networkType.value = 'wifi'
  }
}
/**
 * 播放视频
 */
function playVideo(e: any) {
  canPlayNoWifi.value = true
  polyvPlayerContext && polyvPlayerContext.play()
}
/**
 * 视频播放状态监听
 * @param {*} newstate
 * @param {*} oldstate
 */
function playstatechange(e: any) {
  console.log('playstatechange', e)
  let newstate = e.detail.newstate
  if (newstate == 'ready' || newstate == 'error') {
    playing.value = false
  } else if (newstate == 'playing') {
    reportEventData(keyUtils.KEY_VIDEO_PLAY, {
      page_name: 'pairGuideVideo页面',
    })
    playing.value = true
  }
}
function handlePause() {
  playing.value = false
}
function handleEnded() {
  playing.value = false
}
</script>
<style lang="less">
.playLayout {
  width: 100%;
  height: 420rpx;
}

.desLayout {
  font-family: PingFang SC;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.41px;
  text-align: center;
  margin-top: 30rpx;
  padding: 0 60rpx;
}

.container {
  width: 100%;
  height: 100%;
}

.productDesLayout {
  width: 78.7%;
  height: 45.3%;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 76rpx;
  margin-top: 48rpx;
}
.videoTip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 410rpx;
  background: transparent;
  z-index: 999;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
.tipDesc {
  color: #fff;
  font-size: 36rpx;
  margin: 134rpx auto 20rpx;
}
.tipBtm {
  display: flex;
  justify-content: center;
}
.tipBtm view {
  width: 200rpx;
  height: 72rpx;
  border-radius: 8rpx;
  color: #fff;
  font-size: 32rpx;
  line-height: 72rpx;
  text-align: center;
  background: linear-gradient(#4475d5, #3d56a1);
  margin: 0 20rpx;
  border-radius: 36rpx;
}

.playBtn {
  width: 100%;
  height: 128rpx;
  background: linear-gradient(#4475d5, #3d56a1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 32rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
}
</style>
